<template>
    <div class="">
        <div class="goodList">
            <good-item :goodList="goodList"></good-item>
            <div v-if="goodList.length == 0" style="text-algin:center;width:100%">
                <el-empty description="暂无该系列品牌车辆"></el-empty>
            </div>
        </div>
    </div>
</template>
<script setup>
import { ref, computed, onMounted, getCurrentInstance } from "vue";

import { useRouter, useRoute } from "vue-router";
import goodItem from "../Home/components/goodItem.vue";

import { getLocalStorage } from "@/utils/cache.js"
const { proxy } = getCurrentInstance();

const $route = useRoute()
const loading = ref(false);
const $router = useRouter();
onMounted(() => {
    getGoodList();

});

const goodList = ref([])
const params = ref({
    current: 1,
    size: 15,
    brand: "",
    keyword: "",
    model: "",
    series: ""
})
const getGoodList = () => {
    params.value.keyword = $route.query.key
    proxy.$get({
        url: "/product/listing/products",
        params: params.value
    }).then((res) => {
        goodList.value = res.records
        loading.value = false;
    }, () => {
        loading.value = false;
    });
}
</script>

<style lang="less" scoped>
.home {
    width: 1200px;
    background: #ffffff;
    border-radius: 5px;
    margin: 0 auto;
}
.goodList {
    display: flex;
    width: 1200px;
    margin: 15px auto;
    flex-wrap: wrap;
}
.bannerBlock {
    width: 1200px;
    display: flex;
    margin: 15px auto;
    .banner {
        width: 927px;
        height: 367px;
        box-shadow: 0px 6px 8px 0px rgba(0, 79, 115, 0.05);
        border-radius: 5px;
        margin-right: 15px;
    }
    .userInfoBlock {
        width: 238px;
        height: 332px;
        background: #ffffff;
        box-shadow: 0px 6px 8px 0px rgba(0, 79, 115, 0.05);
        border-radius: 5px;
        padding: 20px 10px 15px;
        .status {
            display: flex;
            margin-left: 64px;
            margin-bottom: 13px;
            .item {
                width: 56px;
                height: 21px;
                background: #d8d8d8;
                border-radius: 11px;
                text-align: center;
                line-height: 21px;
                font-size: 12px;
                font-weight: 400;
                color: #fff;
                margin-right: 10px;
                &.active {
                    background: #e2f1fc;
                    color: #348fe4;
                }
            }
        }
        .userInfo {
            display: flex;
            margin-bottom: 13px;
            .avatar {
                margin: 0;
            }
            .company {
                margin-left: 10px;
            }
        }
        .avatar {
            width: 54px;
            height: 54px;
            margin: 0 auto;
        }
        .welCome {
            text-align: center;
            margin: 15px auto;
        }
        .loginBlock {
            text-align: center;
            margin-bottom: 22px;
            .el-button {
                width: 95px;
                height: 36px;
            }
        }
        .actions {
            margin-bottom: 22px;
            display: flex;
            .item {
                color: #535353;
                margin: 0 auto;
                font-size: 12px;
                text-align: center;
                .icon {
                    width: 44px;
                    height: 44px;
                    margin-bottom: 8px;
                }
            }
        }
        .ad {
            padding-top: 10px;
            position: relative;
            &::after {
                content: "";
                position: absolute;
                width: 258px;
                left: -10px;
                height: 1px;
                background: #f2f2f2;
                top: 0;
            }
        }
    }
}
.sortList {
    width: 1200px;
    height: 100px;
    background: #ffffff;
    box-shadow: 0px 6px 8px 0px rgba(0, 79, 115, 0.05);
    border-radius: 6px 6px 0px 0px;
    margin: 0 auto !important;
    .item {
        display: flex;
        align-items: center;
        .icon {
            width: 50px;
            height: 50px;
            margin-left: 50px;
        }
        .info {
            margin-left: 12px;
            .title {
                font-size: 18px;
                font-weight: 500;
                color: #202020;
                line-height: 25px;
            }
            .subTitle {
                font-weight: 400;
                color: #5e6163;
                line-height: 17px;
                font-size: 12px;
            }
        }
    }
}
</style>